<template>
  <div>
    <el-menu
      :default-active="activeIndex"
      class="d-flex"
      mode="horizontal"
      router="true"
      type="flex"
    >
      <el-menu-item class="mr-auto">
           <div class="svgPos">
    <svg width="41.06" height="51.28" viewBox="0 15 24 24.15" xmlns="http://www.w3.org/2000/svg"
      data-copyright="https://github.com/oubenruing/svg-text-animate" style="vertical-align: text-top">
      <g id="svgGroup" stroke-linecap="round" stroke="#5698c3" fill="none"
        style="fill: none; stroke: #5292c9; stroke-width: 1px">
        <path d="M16.40 19.72L16.40 19.72L16.52 19.72Q17.56 19.72 20.20 23.12L20.20 23.12L20.52 23.84Q20.52 24.36 16.76 28.04L16.76 28.04Q14.56 30.36 14.36 30.36L14.36 30.36Q13.92 30.84 13.48 31.44L13.48 31.44Q21.92 39.68 23.40 40.20L23.40 40.20Q24.48 41.04 24.48 41.12L24.48 41.12L24.48 41.20L24.40 41.20Q20.16 40.32 13.80 34.84L13.80 34.84L11.76 32.88Q7.96 36.20 6.84 37.36L6.84 37.36Q4.92 38.92 2.80 39.96L2.80 39.96Q1.36 39.96 0.92 39.04L0.92 39.04Q0.92 38.12 1.92 37L1.92 37Q1.92 36.80 8.44 30.36L8.44 30.36Q8.44 30.20 8.88 29.72L8.88 29.72Q4.44 24.80 3.32 22.04L3.32 22.04Q2.88 21.24 2.88 20.76L2.88 20.76L3.08 20.68L3.16 20.68Q5.36 21.04 9.08 25.80L9.08 25.80Q10.40 27.68 10.40 27.84L10.40 27.84Q10.56 27.84 11.84 26.32L11.84 26.32Q13.24 24.76 15.24 22.04L15.24 22.04Q16.40 20.96 16.40 20.68L16.40 20.68Q16.40 20.60 16.24 19.80L16.24 19.80L16.40 19.72Z
">
        </path>
      </g>
    </svg>
    <svg width="33" height="52.31" viewBox="-4 14 22.58 18.15" xmlns="http://www.w3.org/2000/svg"
      data-copyright="https://github.com/oubenruing/svg-text-animate" style="vertical-align: text-top">
      <g id="svgGroup" stroke-linecap="round" stroke="#5292c9" fill="none"
        style="fill: none; stroke: #5292c9; stroke-width: 1px">
        <path
          d="M6.52 10.20L6.52 10.20Q8.96 10.88 10.56 13.84L10.56 13.84L10.68 14.44L10.68 14.92Q10.68 16.92 8.76 17.52L8.76 17.52Q8.76 17.68 7.80 17.88L7.80 17.88Q6.48 18.76 5.96 18.76L5.96 18.76L5.88 18.76Q5.68 18.76 5.68 18.56L5.68 18.56L5.68 18.28Q6.36 16.40 6.64 13.36L6.64 13.36Q6.76 13.36 7 12.40L7 12.40Q6.80 12.20 6.04 12.12L6.04 12.12Q5.88 12.20 5.56 12.20L5.56 12.20L5.20 11.72L5.20 11.56Q5.60 10.84 6.52 10.20L6.52 10.20ZM6.84 21.92L6.84 21.92L6.92 21.92Q7.96 21.92 9.44 23.96L9.44 23.96L9.44 24.12Q9.12 25.20 7 28.84L7 28.84Q4.92 33.76 4.92 36.16L4.92 36.16L5 36.84L4.92 37Q5.08 38 5.28 38L5.28 38Q6.84 37.48 8.28 35.56L8.28 35.56Q8.68 35.20 8.76 35.20L8.76 35.20L8.84 35.20Q9.04 35.24 9.04 35.40L9.04 35.40L9.04 35.56Q9.04 37.40 7.68 39.44L7.68 39.44Q6.72 40 6.36 40L6.36 40Q2.20 38.16 2.20 34.72L2.20 34.72L2.20 33.96Q2.20 31.64 4.12 27.20L4.12 27.20Q4.60 26.56 4.60 26.08L4.60 26.08L4.52 26.08Q3.08 26.64 2.12 26.64L2.12 26.64Q0 25.52 0 24.52L0 24.52Q0 24.12 0.40 23.96L0.40 23.96L0.48 23.96L1.64 24.44Q6.40 22.20 6.64 22.20L6.64 22.20Q6.64 21.92 6.84 21.92L6.84 21.92Z">
        </path>
      </g>
    </svg><svg width="47" height="52.25" viewBox="-1 16 29.58 18.15" xmlns="http://www.w3.org/2000/svg"
      data-copyright="https://github.com/oubenruing/svg-text-animate" style="vertical-align: text-top">
      <g id="svgGroup" stroke-linecap="round" stroke="#5292c9" fill="none"
        style="fill: none; stroke: #5292c9; stroke-width: 1px">
        <path
          d="M10.64 19.96L10.64 19.96L10.96 19.96Q12.76 19.96 15.12 23.08L15.12 23.08Q15.40 24.20 16.68 25.60L16.68 25.60L16.68 26.32Q14.48 30.40 14.48 31.64L14.48 31.64L14.40 31.64L14.48 31.84Q14.16 33.04 14.08 34.80L14.08 34.80Q14.28 38.32 15.44 38.32L15.44 38.32Q16.80 38.68 16.88 39.08L16.88 39.08L16.88 39.48Q16.88 39.80 15.96 40L15.96 40Q13.28 38.96 11.68 35.92L11.68 35.92Q11.36 34.96 11.36 34.80L11.36 34.80L11.16 34.80Q7.24 39.36 4.80 39.36L4.80 39.36Q2.84 39.36 0.72 36.36L0.72 36.36Q0.40 35.84 0.40 35L0.40 35L0.40 34.04Q0.40 31.48 3 26.64L3 26.64Q4.64 23.80 7.92 21.12L7.92 21.12Q9.32 19.96 10.64 19.96L10.64 19.96ZM12.20 22.48L12.20 22.48L12 22.36Q7.52 24.52 4.80 30.92L4.80 30.92Q4.08 32.04 3.32 34.88L3.32 34.88L3.44 35.08Q3.28 35.36 3.12 36.24L3.12 36.24Q3.20 36.44 3.20 36.56L3.20 36.56L3.44 36.56Q4.48 36.44 7.72 33.44L7.72 33.44Q12.28 28.32 12.28 26.24L12.28 26.24Q12.64 26.24 13.04 24.24L13.04 24.24L13.04 23L12.84 22.24Q12.64 22.24 12.20 22.48L12.20 22.48Z">
        </path>
      </g>
    </svg><svg width="36" height="52" viewBox="0 17 26.58 13.15" xmlns="http://www.w3.org/2000/svg"
      data-copyright="https://github.com/oubenruing/svg-text-animate" style="vertical-align: text-top">
      <g id="svgGroup" stroke-linecap="round" stroke="#5292c9" fill="none">
        <path
          d="M10.32 19.88L10.32 19.88L10.68 19.88Q11.92 19.88 13.80 21.56L13.80 21.56Q15.80 22.52 17.08 24.52L17.08 24.52Q17.88 25.72 17.88 26.64L17.88 26.64L17.80 26.64L17.88 26.80L17.88 28.12Q17.88 28.32 17.52 29.76L17.52 29.76Q17.60 29.88 17.60 29.96L17.60 29.96Q17.32 30.24 16.60 32.28L16.60 32.28Q15.80 33.76 15.20 34.60L15.20 34.60Q13.40 37.24 10.68 39L10.68 39Q9 39.96 7.36 39.96L7.36 39.96L7.16 39.96Q4.56 39.96 1.52 36.08L1.52 36.08Q0.88 34.76 0.88 33.64L0.88 33.64L0.88 33.36Q0.88 29.92 3.64 24.88L3.64 24.88Q5.88 21.36 8.48 20.44L8.48 20.44Q9.80 19.88 10.32 19.88L10.32 19.88ZM4.12 34.96L4.12 34.96L4.12 35.80L4.20 36.24L4.12 36.40Q4.12 37.08 4.68 37.08L4.68 37.08Q5 37.08 5.12 37.16L5.12 37.16Q6.48 37 8.44 35.96L8.44 35.96Q9.64 35.12 10.96 33.64L10.96 33.64Q11.12 33.64 12.16 32.16L12.16 32.16Q13.84 29.52 13.84 28.84L13.84 28.84Q14.44 27.88 14.84 25.52L14.84 25.52L14.76 25.24L14.84 24.88Q14.84 23.76 14.36 23.56L14.36 23.56L13.72 23.88L12.64 23.48Q11.76 23.48 9.36 24.20L9.36 24.20Q8.60 24.92 7.36 26.72L7.36 26.72Q5.08 29.88 4.12 34.96L4.12 34.96Z"></path>
      </g>
    </svg><svg width="47" height="52.22" viewBox="-1 13 35.58 20.15" xmlns="http://www.w3.org/2000/svg"
      data-copyright="https://github.com/oubenruing/svg-text-animate" style="vertical-align: text-top">
      <g id="svgGroup" stroke-linecap="round" stroke="#5292c9" fill="none">
        <path
          d="M8.56 20L8.56 20L8.64 20Q9.56 20.08 10.48 21.40L10.48 21.40L10.48 22.28Q10.12 23.76 9.72 24.76L9.72 24.76L9.84 24.96Q9.28 25.64 9.28 26.36L9.28 26.36Q8.96 26.36 8.32 28.32L8.32 28.32Q8.20 28.32 8.12 28.64L8.12 28.64Q8.20 28.84 8.20 28.96L8.20 28.96L8.32 28.96Q14.88 22.80 16.64 22.80L16.64 22.80L16.88 22.80Q20.32 24.20 20.32 27.12L20.32 27.12L19.88 29.28Q20.04 29.28 23.44 25.64L23.44 25.64Q27.04 22 29.40 20.20L29.40 20.20Q32 21.48 32.44 23.04L32.44 23.04L32.44 23.24Q32.44 24.64 31.36 27.44L31.36 27.44Q29.40 32.80 28.64 37.20L28.64 37.20L29.20 37.28L32.32 36.88Q32.80 37.08 32.88 37.28L32.88 37.28L32.88 37.72Q31 40 29.72 40L29.72 40L29.64 40Q27.64 40 24.88 36.20L24.88 36.20Q24.56 35.04 24.56 34.48L24.56 34.48L24.56 34.16Q24.56 31.80 25.84 28.12L25.84 28.12L25.84 28L25.72 28Q25.52 28 21.72 32.20L21.72 32.20Q18 36.48 17.20 39.12L17.20 39.12L16.96 39.24L16.64 39.24Q14.12 38.32 12.88 36L12.88 36L12.76 35.44Q13.72 31.44 14.04 30.72L14.04 30.72Q14.92 28.76 15.12 27.80L15.12 27.80Q14.68 27.80 12.32 29.96L12.32 29.96Q9.92 32.20 8 34.48L8 34.48Q5.32 37.92 4.44 39.88L4.44 39.88L4.20 40Q1.64 39.28 0.12 36.64L0.12 36.64Q0 36.44 0 36.20L0 36.20L0 35.88Q0.60 33.48 2.04 30.80L2.04 30.80Q5 26.20 5.96 23.80L5.96 23.80Q7.64 20.80 8.56 20L8.56 20Z
">
        </path>
      </g>
    </svg><svg width="47" height="52.25" viewBox="-1 16 29.58 18.15" xmlns="http://www.w3.org/2000/svg"
      data-copyright="https://github.com/oubenruing/svg-text-animate" style="vertical-align: text-top">
      <g id="svgGroup" stroke-linecap="round" stroke="#5292c9" fill="none"
        style="fill: none; stroke: #5292c9; stroke-width: 1px">
        <path
          d="M10.64 19.96L10.64 19.96L10.96 19.96Q12.76 19.96 15.12 23.08L15.12 23.08Q15.40 24.20 16.68 25.60L16.68 25.60L16.68 26.32Q14.48 30.40 14.48 31.64L14.48 31.64L14.40 31.64L14.48 31.84Q14.16 33.04 14.08 34.80L14.08 34.80Q14.28 38.32 15.44 38.32L15.44 38.32Q16.80 38.68 16.88 39.08L16.88 39.08L16.88 39.48Q16.88 39.80 15.96 40L15.96 40Q13.28 38.96 11.68 35.92L11.68 35.92Q11.36 34.96 11.36 34.80L11.36 34.80L11.16 34.80Q7.24 39.36 4.80 39.36L4.80 39.36Q2.84 39.36 0.72 36.36L0.72 36.36Q0.40 35.84 0.40 35L0.40 35L0.40 34.04Q0.40 31.48 3 26.64L3 26.64Q4.64 23.80 7.92 21.12L7.92 21.12Q9.32 19.96 10.64 19.96L10.64 19.96ZM12.20 22.48L12.20 22.48L12 22.36Q7.52 24.52 4.80 30.92L4.80 30.92Q4.08 32.04 3.32 34.88L3.32 34.88L3.44 35.08Q3.28 35.36 3.12 36.24L3.12 36.24Q3.20 36.44 3.20 36.56L3.20 36.56L3.44 36.56Q4.48 36.44 7.72 33.44L7.72 33.44Q12.28 28.32 12.28 26.24L12.28 26.24Q12.64 26.24 13.04 24.24L13.04 24.24L13.04 23L12.84 22.24Q12.64 22.24 12.20 22.48L12.20 22.48Z">
        </path>
      </g>
    </svg>
  </div>
      </el-menu-item>
      
      <el-row class="demo-autocomplete">
        <el-col :span="20">
          <el-autocomplete
            class="inline-input"
            v-model="searchVal"
            :fetch-suggestions="querySearch"
            placeholder="请输入内容"
            :trigger-on-focus="false"
            @select="handleSelect"
            @keyup.enter.native="conditionSearch()"
            clearable
          >
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
            <template slot-scope="{ item }">
              <div class="name" v-html="item.value"></div>
            </template>
          </el-autocomplete>
        </el-col>
        <el-col> </el-col>
      </el-row>
      <el-menu-item index="/home">{{ $t("header.home") }}</el-menu-item>
      <el-menu-item index="/archive">{{ $t("header.archive") }}</el-menu-item>
      <el-menu-item index="/about">{{ $t("header.about") }}</el-menu-item>
      <el-submenu>
        <template slot="title">{{ $t("header.language") }}</template>
        <el-menu-item @click="toggleLang('zh')">{{
          $t("header.chinaese")
        }}</el-menu-item>
        <el-menu-item @click="toggleLang('en')">{{
          $t("header.english")
        }}</el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>
<script>
import bus from "../eventbus";
export default {
  data() {
    return {
      activeIndex: "/home",
      content: [],
      state1: "",
      searchVal: "",
    };
  },
  watch: {
    searchVal(val) {
      if (val.trim() === "") {
        bus.$emit("msg", val);
      }
    },
  },
  methods: {
    toggleLang(lang) {
      if (lang === "zh") {
        localStorage.setItem("locale", "zh");
        this.$i18n.locale = localStorage.getItem("locale");
        this.$message({
          message: "切换为中文！",
          type: "success",
        });
      } else if (lang === "en") {
        localStorage.setItem("locale", "en");
        this.$i18n.locale = localStorage.getItem("locale");
        this.$message({
          message: "Switch to English!",
          type: "success",
        });
      }
    },
    querySearch(queryString, cb) {
      this.$axios
        .get("http://121.43.152.1:8081/searchHint/" + queryString)
        .then((resp) => {
          let resultArr = resp.data.data.map((item) => {
            return {
              value: item,
            };
          });

          this.content = resultArr;
          // 调用 callback 返回建议列表的数据
          cb(resultArr);
        });

      // var restaurants = this.restaurants;
      // var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
    },
    handleSelect(val) {
      let str = val.value.replace(/<[^>]*>/g, "");
      this.searchVal = str;
    },
    conditionSearch() {
      bus.$emit("msg", this.searchVal);
      // this.$axios
      //   .get("http://localhost:8081/queryAllArticleByPage?title="+ this.searchVal)
      //   .then((resp) => {
      //       console.log(resp)
      //   });
    },
    //   createFilter(queryString) {
    //     return (restaurant) => {
    //       return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
    //     };
    //   },
    //   loadAll() {
    // 	const _this= this
    //      this.$axios.get(`http://localhost:8081/api/getStrById/${_this.$route.query.aid}`).then(function (resp) {
    //       })
    //     return [
    //       { "value": "三全鲜食（北新泾店）"}
    //     ];
    //   },
    //   handleSelect(item) {
    //     console.log(item);
    //   }
  },
  // mounted() {
  //   this.restaurants = this.loadAll();
  // }
};
</script>

<style scoped>
.svgPos {
  height: 61px;
  display: flex;
  align-content: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  flex-direction: row;
}
path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation-delay: 3s;
  animation: dash 4s ease-in-out 1s infinite alternate;
}
@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}
</style>

<style>
.demo-autocomplete {
  display: flex;
  align-items: center;
  width: 33%;
}
</style>